"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, Search, Plus, Heart, User } from "lucide-react";

const items = [
  { href: "/", label: "首页", icon: Home },
  { href: "/discover", label: "发现", icon: Search },
  { href: "/create", label: "发布", icon: Plus },
  { href: "/likes", label: "喜欢", icon: Heart },
  { href: "/me", label: "我的", icon: User },
];

export default function BottomNav() {
  const pathname = usePathname();
  return (
    <nav className="fixed bottom-0 left-0 right-0 z-20 border-t border-gray-100 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/80">
      <div className="mx-auto max-w-screen-md h-16 flex items-center justify-around px-2">
        {items.map((item) => {
          const active = pathname === item.href;
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex flex-col items-center justify-center py-2 px-3 rounded-lg transition-all duration-200 ${
                active 
                  ? "text-red-500" 
                  : "text-gray-600 hover:text-gray-900 active:scale-95"
              }`}
            >
              <Icon size={20} className={`mb-1 ${active ? "fill-current" : ""}`} />
              <span className={`text-xs font-medium ${active ? "font-semibold" : ""}`}>
                {item.label}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}